<template>
  <!--  最外层div色设置高度无效，但可以设置宽度，排除变量尝试的-->
  <div class="detail-container">
    <div style="width: 100%;height: 80vh">
      <div class="titlePart"> <!--名称部分-->
        <div style="height: 12px;width: 100%"></div> <!--用来隔离-->
        <div style="display: flex">
          <div style="background-color:rgb(245,183,12);width: 3px;height:22px;margin-top: 1px"></div>
          <span style="padding-left:12px;letter-spacing:5px; background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
             -webkit-background-clip:text;  -webkit-text-fill-color:transparent; font-size: 20px ">
            <strong>{{ sydwName }}</strong>
          </span>
        </div>
      </div>
      <div class="echarts">
        <el-row style="height: 100%;">
          <el-col :span="8" style="height: 100%">
            <div id="topDevStatistics" style="width: 100%;height:100%;"></div>     <!--  饼图-->
          </el-col>
          <el-col :span="16" style="height: 100%;">
            <div  style="width: 100%;height:50%">
              <div id="usedTime" style="width: 100%;height:100%;"></div>
            </div>
            <div style="width: 100%;height:50%;">
              <div id="cubCount" style="width: 100%;height:100%;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="table">
        <div class="container">
          <el-table v-loading="" :data="tankListTable" style="width: 100%"  stripe>
            <el-table-column fixed prop="id" label="序号" width="60"></el-table-column>
            <el-table-column prop="f002" label="设备登记号" width="120"></el-table-column>
            <el-table-column prop="f004" label="设备分类" width="120"></el-table-column>
            <el-table-column prop="f006" label="关键参数（m3）" width="120"></el-table-column>
            <el-table-column prop="f024" label="投用日期"></el-table-column>
            <el-table-column prop="f025" label="检验日期"></el-table-column>
            <el-table-column prop="f035" label="检验报告"></el-table-column>
            <el-table-column prop="f034" :show-overflow-tooltip="true" label="下一次检验日期"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="SydwChuguanListCurrentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="SydwListSearchArgs.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="SydwChuguanListTotal">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {
  serachSydwList,
  SydwListSearchArgs
} from '../../../../../api/chuguan/data-service'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

export default {
  name: "UnitDetail",
  components: {},
  props: {
    sydwName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      SydwListSearchArgs: new SydwListSearchArgs(),
      SydwChuguanListTotal: 5,
      SydwChuguanListCurrentPage: 1,

      /* tankListTable: [
        {
          devId: 1,
          devRegCode: 'B-104',
          devCategory: '内浮顶',
          keyParas: '5000',
          initDate: '1998-4-19',
          checkDate: '2018-8-20',
          checkReport: '查看',
          nextCheckDate: '2020-8-20'
        },
        {
          devId: 2,
          devRegCode: 'B-105',
          devCategory: '内浮顶',
          keyParas: '5000',
          initDate: '2006-8-20',
          checkDate: '2018-8-20',
          checkReport: '查看',
          nextCheckDate: '2020-8-20'
        },
        {
          devId: 3,
          devRegCode: 'B-106',
          devCategory: '内浮顶',
          keyParas: '5000',
          initDate: '2007-7-9',
          checkDate: '2018-8-20',
          checkReport: '查看',
          nextCheckDate: '2020-8-20'
        },
        {
          devId: 4,
          devRegCode: 'B-107',
          devCategory: '内浮顶',
          keyParas: '5000',
          initDate: '2007-9-19',
          checkDate: '2018-8-20',
          checkReport: '查看',
          nextCheckDate: '2020-8-20'
        },
        {
          devId: 5,
          devRegCode: 'B-108',
          devCategory: '拱顶',
          keyParas: '5000',
          initDate: '1998-4-19',
          checkDate: '2018-8-20',
          checkReport: '查看',
          nextCheckDate: '2020-8-20'
        },
      ],*/
      tankListTable: [],
      tag:0,
      _tankListTable:[],
      topDev_:[],
      topDev: {
        option: {
          color: ['#d0961f', '#f3cd0e'],
          title: {
            show: false,
            left: "5%",
            top: '1%',
            text: '储罐灌顶类型统计图',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold', color: '#3e7bd6'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 'center',
            orient: 'vertical',
            bottom: 'bottom'
          },
          series: [{
            radius: '70%',
            type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [
              { value: 17, name: '内浮顶' },
              { value: 14, name: '拱顶' },
            ],
            label: {  //图上方显示值
              normal: {
                show: true,
                // formatter: '{c},({d}%)',   //c：值，b:名字，d:百分比
                //修改饼状图百分比位数
                formatter: function(data) {
                  console.log("dataxianshi" + data)
                  return data.value + ',\n' + data.percent.toFixed(0) + "%"; //取小数点后0位
                },
                position: 'inside'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },
      usedTime: {
        option: {
          color: ['#7ce00a'],
          title: {
            show: true,
            left: "10%",
            top: '1%',
            text: '储罐投入使用年份',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#3177c2'
            }
          },
          grid: {
            height: 150
          },
          tooltip: {},
          legend: {},
          xAxis: {
            data: ["不详", "1993年", "1995年", "1997年"],
          },
          yAxis: {
            type: 'value',
            //scale: true,
            name: '单位：台',
            minInterval: 1,
          },
          series: [{
            barWidth: '30%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [3, 5, 11, 12],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }

      },
      cubCount: {
        option: {
          color: ['#ba3ed6'],
          title: {
            show: true,
            left: "10%",
            top: '1%',
            text: '储罐公称容积',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3177c2'
            }
          },
          grid: { height: 150 },
          xAxis: {
            data: ["1000m3", "2000m3", "2400m3", "3600m3", "5000m3", "10000m3"],
          },
          yAxis: {
            type: 'value',
            //scale: true,
            name: '单位：台',
            minInterval: 1,
          },
          series: [{
            barWidth: '25%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [14, 2, 3, 4, 6, 2],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }

      },

    }
  },
  created() {
    this.sydeUnitList()
  },
  mounted() {
    this.dataAnalyze(this.tankListTable)
   // this.topDevStatisticsShow()

  },
  methods: {
    dataAnalyze:function(sydwList){
      let _topDev=[]
      let _usedTime=[]
      let _cubCount=[]
      for(let i=0;i<sydwList.length;i++) {
        //数据处理部分
        sydwList[i].f006=sydwList[i].f006.replace(/\s+/g,"")  //去出空格
        let prevalue=sydwList[i].f006
        if(prevalue.length<2) {
          sydwList[i].f006 = "0m3"
        }
        sydwList[i].f006=sydwList[i].f006.slice(0,sydwList[i].f006.length-2)
        sydwList[i].f004 = sydwList[i].f004.replace(/\s+/g, "")
        if (sydwList[i].f004 == '拱顶罐') {
          sydwList[i].f004 = '拱顶'
        }
        if (sydwList[i].f004 == '/') {
          sydwList[i].f004 = '未知'
        }
        //开始统计
        _topDev.push(sydwList[i].f004)
        _usedTime.push(sydwList[i].f024)
        _cubCount.push(sydwList[i].f006)
      }
      this.topDevStatisticsShow(_topDev);
      this.usedTimeShow(_usedTime)
      this.cubCountShow(_cubCount)
      this.$forceUpdate()

    },
    sydeUnitList: async function() {
      this.SydwListSearchArgs.pageSize = 146
      const res = await serachSydwList(this.SydwListSearchArgs);
      const _list = res.data.data;
      let sydwList=[]
      for(let i=0;i<_list.length;i++){
        if(_list[i].f001==this.sydwName){
          sydwList.push(_list[i])
        }
      }
      this.tankListTable=sydwList
      this.SydwChuguanListTotal=this.tankListTable.length
      this.pageSizeChange(10)
      this.dataAnalyze(sydwList)
    },
    cubCountShow: function(_cubCount) {
      let cubCount=[]
      for(let i in _cubCount){
        if(cubCount.indexOf(_cubCount[i])==-1){
          cubCount.push(_cubCount[i])
        }
      }
      let cubCountNum
      if(cubCount.length<1){
        cubCountNum=[1,]
        cubCount.push("未知")
      }else {
        cubCountNum = new Array(cubCount.length).fill(0);
        for(let n in cubCount){
          for(let m in _cubCount){
            if(_cubCount[m]==cubCount[n]){
              cubCountNum[n]++
            }
          }
        }
      }
      console.log(cubCount,cubCountNum)
      this.cubCount.option.xAxis.data=cubCount
      this.cubCount.option.series[0].data=cubCountNum
      var chartDom1 = document.getElementById('cubCount');
      var myChart2 = echarts.init(chartDom1);
      var option2 = this.cubCount.option
      myChart2.setOption(option2);
    },
    /**
     * 储罐投入使用年份
     */
    usedTimeShow: function(_usedTime) {
      let usedTime=[]
      for(let i in _usedTime){
        if(_usedTime[i].length>3){
          _usedTime[i]=_usedTime[i].slice(0,4)+"年"
        }
        if(usedTime.indexOf(_usedTime[i])==-1){
          usedTime.push(_usedTime[i])
        }
      }
      let usedNum
      if(usedTime.length<1){
        usedNum=[1,]
        usedTime.push("未知")
      }else {
        usedNum = new Array(usedTime.length).fill(0);
        for(let n in usedTime){
          for(let m in _usedTime){
            if(_usedTime[m]==usedTime[n]){
              usedNum[n]++
            }
          }
        }
      }
      console.log(usedNum,usedTime)
      this.usedTime.option.xAxis.data=usedTime
      this.usedTime.option.series[0].data=usedNum
      var chartDom1 = document.getElementById('usedTime');
      var myChart2 = echarts.init(chartDom1);
      var option2 = this.usedTime.option
      myChart2.setOption(option2);
    },

    /**
     * 储罐灌顶类型饼状统计图
     */
    topDevStatisticsShow: function(_topDev) {
      //去除重复值
      let topDev=[]
      for(let i in _topDev){
        if(topDev.indexOf(_topDev[i])==-1){
          topDev.push(_topDev[i])
        }
      }
      let topNum = new Array(topDev.length).fill(0);
      for(let n in topDev){
        for(let m in _topDev){
          if(_topDev[m]==topDev[n]){
            topNum[n]++
          }
        }
      }
      let objs=[]
      if(topDev.length==0){
        objs.push({value:1,name:"未知"})
      }
      else {
        for(let n in topDev){
          objs.push({value:topNum[n],name:topDev[n]})
        }
      }
      console.log(JSON.stringify(objs))
      this.topDev.option.series[0].data=objs
      let chartDom1 = document.getElementById('topDevStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.topDev.option
      myChart2.setOption(option2);
    },

    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.SydwListSearchArgs.pageSize=pageSize
      if (this.tag==0){
        this._tankListTable=this.tankListTable
        this.tag=1
      }
      let thirdTable=[]
      if(pageSize<=this._tankListTable.length){
        for (let i=0;i<pageSize;i++){
          thirdTable.push(this._tankListTable[i])
        }
        this.tankListTable=thirdTable
      }else {
        this.tankListTable=this._tankListTable
      }
      this.$forceUpdate()

    },
    // 页数改变
    async pageChange(page) {
      this.SydwChuguanListCurrentPage = page
      let thirdTable=[]
      if(page*this.SydwListSearchArgs.pageSize-1<this._tankListTable.length){
        for(let table_start=this.SydwListSearchArgs.pageSize*(page-1);table_start<=page*this.SydwListSearchArgs.pageSize -1;table_start++){
          thirdTable.push(this._tankListTable[table_start])
        }
        this.tankListTable=thirdTable
      }else {
        for(let table_start=this.SydwListSearchArgs.pageSize*(page-1);table_start<this._tankListTable.length;table_start++){
          thirdTable.push(this._tankListTable[table_start])
        }
        this.tankListTable=thirdTable
      }
      this.$forceUpdate()

    },

  }
}
</script>

<style lang="less" scoped>

.detail-container {
  width: 100%;
  .titlePart {
    height: 8%;
  }
  .echarts {
    width: 100%;
    height: 85%;
  }
  table {
    height: 25%;
    background-color: #0ee0e6;
  }
  .page {
    float: right;
    height: 6%;

  }
}
</style>
